<template>
  <div class="home">
    <NavBarView />
    <HomeBannerView />
    <div class="tea-classify">
      <div class="classify-list">
        <router-link
          tag="div"
          :to="`/detail/${item.id}`"
          class="list-item"
          v-for="item in classifyList"
          :key="item.id"
        >
          <img :src="item.imgUrl" alt="" />
          <div class="size">
            <span>{{ item.nm }}</span>
            <span>{{ item.cnm }}</span>
          </div>
          <div class="bg"></div>
        </router-link>
      </div>
    </div>
    <SiftTeaView />
    <TeaCultureView />
    <RecommendView />
    <BtmNavView />
  </div>
</template>

<script>
import NavBarView from "@/components/NavBarView.vue";
import HomeBannerView from "@/components/HomeBannerView.vue";
import BtmNavView from "@/components/BtmNavView.vue";
import { getTeaClassify } from "@/api/inedx";
import SiftTeaView from "@/components/SiftTeaView.vue";
import RecommendView from "@/components/RecommendView.vue";
import TeaCultureView from "@/components/TeaCultureView.vue";
export default {
  data() {
    return {
      classifyList: [],
    };
  },
  methods: {
    async getClassifyList() {
      let { data } = await this.$http(getTeaClassify());
      this.classifyList = data;
    },
  },
  mounted() {
    this.getClassifyList();
  },
  components: {
    NavBarView,
    HomeBannerView,
    BtmNavView,
    SiftTeaView,
    RecommendView,
    TeaCultureView,
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding-bottom: 3.0625rem;
  .tea-classify {
    width: 100vw;
    background-color: #fff;
    margin: 0.9375rem 0;
    .classify-list {
      padding: 0.625rem;
      display: flex;
      justify-content: space-between;
      .list-item {
        width: 30vw;
        min-height: 38vmin;
        position: relative;
        color: #fff;
        img {
          width: 100%;
          height: 100%;
        }
        .bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.2);
        }
        .size {
          position: absolute;
          top: 40%;
          left: 0;
          margin: auto;
          display: flex;
          flex-direction: column;
          text-align: center;
          width: 100%;
          z-index: 1;
        }
      }
    }
  }
}
</style>
